<!-- 刻度盘配置 -->
<template>
  <div>
    <el-form-item label="指标字号">
      <avue-input-number v-model="main.activeOption.valueFontSize"/>
    </el-form-item>
    <el-form-item label="指标颜色">
      <avue-input-color v-model="main.activeOption.valueFontColor"/>
    </el-form-item>
    <el-collapse accordion>
      <el-collapse-item title="刻度设置">
        <el-form-item label="显示刻度值">
          <avue-switch v-model="main.activeOption.axisLabelShow"/>
        </el-form-item>
        <el-form-item label="刻度值字号">
          <avue-input-number v-model="main.activeOption.axisLabelFontSize"/>
        </el-form-item>
        <el-form-item label="刻度值字体颜色">
          <avue-input-color v-model="main.activeOption.axisLabelFontColor"/>
        </el-form-item>
        <el-form-item label="刻度线颜色">
          <avue-input-color v-model="main.activeOption.axisTickLineColor"/>
        </el-form-item>
        <el-form-item label="分隔线颜色">
          <avue-input-color v-model="main.activeOption.splitLineColor"/>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="名称设置">
        <el-form-item label="显示名称">
          <avue-switch v-model="main.activeOption.nameShow"/>
        </el-form-item>
        <el-form-item label="名称字号">
          <avue-input-number v-model="main.activeOption.nameFontSize"/>
        </el-form-item>
        <el-form-item label="名称颜色">
          <avue-input-color v-model="main.activeOption.nameFontColor"/>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="轴线设置">
        <el-form-item label="轴线宽度">
          <avue-input-number v-model="main.activeOption.lineSize"/>
        </el-form-item>
        <avue-crud :option="colorOption"
                   :data="main.activeOption.barColor"
                   @row-save="rowSave"
                   @row-del="rowDel"
                   @row-update="rowUpdate"></avue-crud>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { colorOption } from '@/option/config'
export default {
  inject: ["main"],
  data () {
    return {
      colorOption
    }
  },
  methods: {
    rowSave (row, done) {
      this.main.activeOption.barColor.push(row);
      done()
    },
    rowDel (row, index) {
      this.main.activeOption.barColor.splice(index, 1);
    },
    rowUpdate (row, index, done) {
      this.main.activeOption.barColor.splice(index, 1, row);
      done()
    }
  }
}
</script>
